/*公用的样式*/
.go {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: fixed;
    right: 30px;
    top: 30px;
    z-index: 1001;
}

.more {
    position: fixed;
    right: 60px;
    bottom: 80px;
    z-index: 1001;
    animation: more 0.3s linear infinite alternate;
}

/*内容容器*/
.content {
    width: 900px;
    height: 600px;
    /*background: rgba(0, 0, 0, 0.1);*/
    position: absolute;
    bottom: 0;
    left: 50%;
    /*提高层级*/
    /*transform: translateX(-50%);*/
    margin-left: -450px;
}
/*布局：定位 动画：位移*/

.screen03 .text{
    font-size: 30px;
}
/*第四屏*/
.screen04{
    background: url("../images/05-bg.png") no-repeat center bottom;
}
.screen04 .cloud{
    position: absolute;
    left: -400px;
    top: -50px;
    animation: cloud04 20s linear infinite alternate;
}
@keyframes cloud04 {
    from{

    }
    to{
        transform: translateX(1000px);
    }
}
.screen04 .text{
    text-align: center;
    margin-top: 120px;
}
.screen04 .text img:last-child{
    position: absolute;
    opacity: 0;
}
.screen04 .text.show img:first-child{
    position: absolute;
    opacity: 0;
}
.screen04 .text.show img:last-child{
    position: static;
    opacity: 1;
    transition: all 1s linear;
}

.screen04 .cart{
    text-align: center;
    margin-top: 50px;
    position: relative;
    z-index: 1002;
}
.screen04 .sofa{
    position: absolute;
    top: 200px;
    left: 420px;
    transform: rotate(45deg);
    /*display: none;*/
    opacity: 0;
}
.screen04 .address{
    position: absolute;
    width: 283px;
    height: 270px;
    left: 50%;
    /*css3的居中 基于本身*/
    transform: translateX(-50%);
    bottom: 150px;
    display: none;
}
.screen04 .address img:last-child{
    position: absolute;
    top: 60px;
    left: 50%;
    /*css3的居中 基于本身*/
    transform: translateX(-50%);
    z-index: 1;
    display: none;
}


/*1.掐时间  做延时  完成动画的衔接*/
/*2.jquery的动画  $('dom').animate(property,duration,speed,callback) */
/*speed  (swing linear) */
/*3.能不能监听到动画或者过度的结束*/
/*4.css3当中 过渡 transitionend  动画 animationend*/
.screen04.now .sofa{
    opacity: 1;
    transform: translateX(1000px);
    transition: transform 3s;
}
.screen04.now .cart{
    transition: all 3s;
    transform: translateX(1000px);
}


/*第7屏*/
.screen05{
    background: url("../images/07-bg.png")  center bottom;
}
.screen05 .star{
    position: absolute;
    left: 264px;
    top: 148px;
}
.screen05 .star img{
    float: left;
    margin-right: 6px;
    /*display: none;*/
    opacity: 0;
}
.screen05 .star.show img{
    opacity: 1;
    transition: all 0.3s linear;
}
.screen05 .text{
    position: absolute;
    left: 273px;
    top: 180px;
    opacity: 0;
    transform-origin: left bottom;
    transform: scale(0);
}
.screen05 .text.show{
    opacity: 1;
/*    transform: none;
    transition: all 1s linear 2.3s;*/
    animation: text07 1.5s linear 2.3s forwards;
}
@keyframes text07 {
    from{}
    70%{
        transform: scale(1.2);
    }
    to{
        transform: none;
    }
}
.screen05 .again{
    position: absolute;
    right: 0;
    top: 80px;
}